<script>

import * as echarts from 'echarts';

export default {
  name: 'VisThree',
  data() {
    return{

    }
  },
  mounted() {
    this.getData();
  },
  methods:{open1(msg) {
      this.$notify({
        title: msg,
        message: '这是一条成功的提示消息',
        type: 'success'
      });
    },
    open2(msg) {
      this.$notify({
        title: msg,
        message: '这是一条警告的提示消息',
        type: 'warning'
      });
    },
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '这是一条错误的提示消息'
      });
    },
    getData(){
      this.$axios.get('/api/data12', {

      }).then(res =>{
        if (res.data.code === 200) {
          let data1 = [];
          let data2 = [];
          for (let i = 0; i < res.data.result.length; i++) {
            data1.push(
                res.data.result[i].weightMetric
            )
            data2.push(
                res.data.result[i].count
            )
          }
          this.init(data1, data2)

        }

      }).catch(error =>{
        error = "系统出错了"
        this.open4(error)
      })
    },
    init(data1, data2) {

      var chartDom = document.getElementById("main-vis-3");
      var myChart = echarts.init(chartDom);
      var option;
      const xData = data1;
      const seriesData = data2;

      option = {
        backgroundColor:"#fffdfd",
        title: {
          text: "现役球员体重趋势",
          // top: '5',
          // right: '5%',
          // left: '20',
          // bottom: '20%'
          // subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '25%',
          left: '2%',
          right: '16%',
          // bottom: '-10%',
          height: '75%',
          containLabel: true
        },
        xAxis: {
          name: "体重/公斤",
          type: 'category',
          data: xData,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgb(0,0,0)',
            }
          },
          axisLabel: {
            textStyle: {
              color: "#8D949B "
            }
          },
        },
        yAxis: [{
          name: '人数',
          type: 'value',
          axisLabel: {
            textStyle: {
              color: "#8D949B"
            },
            // formatter: '{value}%'

          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#080808'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            },
          },
        }
        ],
        series: [{
          // name: '人数',
          // name: (threeData[0] || {}).indexName,
          name:"人数",
          type: 'line',
          data: seriesData,
          symbol: 'circle',
          symbolSize: 5, //标记的大小
          lineStyle: {
            normal: {
              width: 2,
              color: '#0024f7',
            }
          },
          itemStyle: {
            normal: {
              color: '#0016f1',
            }
          },
          smooth: true
        }
        ]
      };

      option && myChart.setOption(option);
    }
  }
}

</script>

<template>
  <div id="main-vis-3"></div>
</template>

<style scoped>
#main-vis-3 {
  height: 100%;
  width: 100%;
}
</style>